<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('bk9nZ6xbGDXPJefoxdCpW')}}</p>
      <div class="operate-area">
        <div class="inline-item search-item">
          <Input v-model="username" @on-enter="searchTable">
            <span slot="prepend">{{$t('M3ti_8a2HtjRvquFwjNSh')}}</span>
            <Button slot="append" icon="ios-search" @click="searchTable"></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <DatePicker
            type="daterange"
            :options="dateOptions"
            format="yyyy-MM-dd HH:mm:ss"
            placement="bottom-end"
            :placeholder="$t('5TAaL9Lh6qHkqaNkG9MZi')"
            style="width: 300px"
            @on-change="changeTime"
          >
          </DatePicker>
        </div>
        <div class="inline-item search-item" v-if="selections.length">
          <Button type="error" @click="deleteItems">{{$t('hND4KLgCabT6swtTJBIUf')}}</Button>
        </div>
      </div>
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-selection-change="selectChangeHandle"
      >
      </Table>
      <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
  </div>
</template>

<script>
import { getUserLoginLogInfo } from '@/api/data2'

export default {
  name: 'login_log',
  data () {
    return {
      username: '',
      loading: false,
      selections: [],
      dateOptions: {
        shortcuts: [
          {
            text: 'today',
            value () {
              const end = new Date()
              const endTimestamp = end.getTime()
              const d = 24 * 60 * 60 * 1000
              const t = endTimestamp - endTimestamp % d - d / 3
              const start = new Date(t)
              return [start, end]
            }
          },
          {
            text: '1 week',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '1 month',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '3 months',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      },
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('agt'),
          key: 'agent'
        },
        {
          title: this.$t('SWJNpRnfSDK7MAg0omTmr'),
          key: 'station'
        },
        {
          title: this.$t('M3ti_8a2HtjRvquFwjNSh'),
          key: 'username'
        },
        {
          title: this.$t('uFhyC_SH5hozdu6i1YSCV'),
          key: 'lastIP'
        },
        {
          title: this.$t('5TAaL9Lh6qHkqaNkG9MZi'),
          key: 'lastTime'
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20]
    }
  },
  created () {
    this.queryTable()
  },
  methods: {
    searchTable () {
      this.queryTable()
    },
    changeTime () {
      this.queryTable()
    },
    async queryTable ({ current = this.current, pageSize = this.pageSize, username = this.username, phoneOwnerName = this.phoneOwnerName } = {}) {
      this.loading = true
      const res = await getUserLoginLogInfo({
        pageSize,
        current,
        username,
        phoneOwnerName
      })
      this.data = res.tableData
      this.total = res.total
      this.loading = false
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    deleteItems () {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: () => {
          const temp = this.data.filter(d => !this.selections.find(s => s.id === d.id))
          this.data = temp
          this.$Message.success(this.$t('X3B4zUoYLLk9A5CKgzmbn'))
        }
      })
    },
    selectChangeHandle (selection) {
      console.log('========selectionChange', selection)
      this.selections = selection
    }
  }
}
</script>
